<script lang="ts" setup>
// import { useMainStore } from '@/store/main'
import { useSlots, useAttrs, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox, TabsPaneContext } from 'element-plus'

// import dayjs from 'dayjs'

// 入参写法
// const props = defineProps({})
// emit抛出事件
// const emit = defineEmits([])
// const mainStore = useMainStore()
// const clickdemo = () => {
//   mainStore.setDemo('测试测试')
// }
// const tableData = ref([])
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const input2 = ref('')
const textarea = ref('')
const value = ref('')
const drawer2 = ref(false)
const value1 = ref('')

const direction = ref('rtl')
const drawer2_click = () => {
  drawer2.value = true
}
const cancelClick = () => {
  drawer2.value = false
}
const confirmClick = () => {
  ElMessageBox.confirm(`Are you confirm to chose ?`)
    .then(() => {
      drawer2.value = false
    })
    .catch(() => {
      // catch error
    })
}
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}

interface Tree {
  label: string
  children?: Tree[]
}
const data: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]
const defaultProps = {
  children: 'children',
  label: 'label',
}
const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const pageSize4 = ref(100)
const currentPage4 = ref(4)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
// solts和attrs
// const slots = useSlots()
// const attrs = useAttrs()

// 自定义指令
// const vMyDirective = {
//   beforeMount: () => {
//     // 操作
//   },
// }

// 抛出方法或变量给外部ref调用
// defineExpose({})

// 日期时间转换插件dayjs
// const time = ref(dayjs().format('YYYY年MM月DD日 HH:mm:ss'))
</script>
<template>
  <div class="demo_all">
    <div class="demo_div">
      <el-button plain @click="drawer2_click">配置</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="info">Info</el-button>
      <button class="btn_operation">测试</button>
    </div>
    <div class="demo_div">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
    <div class="demo_div">
      <el-input
        v-model="input2"
        style="width: 240px"
        placeholder="Type something"
        :suffix-icon="Search"
        disabled
      />
      <el-input
        v-model="textarea"
        style="width: 240px"
        :rows="2"
        type="textarea"
        placeholder="Please input"
      />
      <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker v-model="value1" type="date" placeholder="Pick a day" />
    </div>
    <el-drawer v-model="drawer2" :direction="direction">
      <template #header>
        <span>set title by slot</span>
      </template>
      <template #default>
        <div>wqewewqewqewqewq</div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">cancel</el-button>
          <el-button type="primary" @click="confirmClick">confirm</el-button>
        </div>
      </template>
    </el-drawer>
    <div class="demo_div">
      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="User" name="first">User</el-tab-pane>
        <el-tab-pane label="Config" name="second">Config</el-tab-pane>
        <el-tab-pane label="Role" name="third">Role</el-tab-pane>
        <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
      </el-tabs>
    </div>
    <div class="demo_div">
      <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
        >Check all</el-checkbox
      >
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="demo_div">
      <el-tree
        style="max-width: 600px"
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </div>
    <div class="demo_div">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.demo_all {
  display: flex;
  flex-direction: column;
}
.demo_div {
  // height: 100%;
  flex: 1;
  padding: 10px;
}
.demo-tabs {
  height: 200px;
  width: 100%;
}
</style>
